<template>
	<navbar/>
	<nut-searchbar v-model="searchValue" @change="onlyToSuggest">
		<template v-slot:rightout>
			<nut-button type="primary" @click="onSearch">搜索</nut-button>
		</template>
	</nut-searchbar>
	<keep-alive>
		<component :is="currentComponent" :data="data.data"></component>
	</keep-alive>
</template>

<script lang="ts" setup>
	import { ref, markRaw, onMounted, reactive } from 'vue'
	import SearchResult from '_c/search/SearchResult.vue'
	import SearchSuggest from '_c/search/SearchSuggest.vue'
	import router from '@/router'
	import { useCommStore } from "@/store/common.ts"
	import { storeToRefs } from 'pinia'
	
	const data = reactive({"data":[]})
	
	// 获取查询关键字
	const searchValue = ref(router.currentRoute.value.query.searchkey)
	
	const store = useCommStore()
	// console.log(store)
	
	// 结构数据成为响应式数据
	const { recentSearch, other } = storeToRefs(store)
	
	// 切换搜索建议/搜索结果
	const lookup = {
		"SearchResult":SearchResult,
		"SearchSuggest":SearchSuggest
	}
	
	const currentComponent = ref(null)
	
	onMounted(() => {
		switchChild()
	})
	
	function switchChild() {
		console.log('switchChild')
		if (!searchValue.value) {
			changeToSuggest()
		}else{
			changeToResult()
		}
	}
		
	function onlyToSuggest(){
		console.log("change to suggest")
		if (!searchValue.value) {
			changeToSuggest()
		}
	}
	
	function onSearch(){
		console.log("获取搜索结果")
		store.saveRecentSearch(searchValue.value)
		console.log(store.getRecentSearch)
		if (!searchValue.value) {
			router.push({
				name: "search"
			})
			changeToSuggest()
		} else {
			router.push({
				name: "search",
				query: {
					"searchkey": searchValue.value
				}
			})
			changeToResult()
		}
	}
	
	function changeToSuggest(){
		console.log("跳转到Suggest")
		currentComponent.value = markRaw(lookup['SearchSuggest'])
	}
	
	function changeToResult(){
		console.log("跳转到Result")
		currentComponent.value = markRaw(lookup['SearchResult'])
		data.data = [{
			id: 1,
	        imgUrl:
	          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
	        title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
	        price: '388',
	        vipPrice: '378',
	        shopDesc: '自营',
	        delivery: '厂商配送',
	        shopName: '阳澄湖大闸蟹自营店>'
	      },{
			id: 2,
	        imgUrl:
	          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
	        title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
	        price: '388',
	        vipPrice: '378',
	        shopDesc: '自营',
	        delivery: '厂商配送',
	        shopName: '阳澄湖大闸蟹自营店>'
	      },{
			id: 3,
	        imgUrl:
	          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
	        title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
	        price: '388',
	        vipPrice: '378',
	        shopDesc: '自营',
	        delivery: '厂商配送',
	        shopName: '阳澄湖大闸蟹自营店>'
	      }]
	}
</script>

<style>
</style>